
<html>
    <head>
    <link rel="stylesheet" href="circle.css">
        <script type="text/javascript">
        
            function sketchSetup() {
                version_tag.innerHTML = sketchGetVersion();
                ioPackPoll = setInterval(function() {
                    var names = sketchIOPackGetDeviceNames();
                    var dc;
                    for (var n = 0; n < names.length; n++) {
                        if (names[n].substr(0, 6) == "remote") {
                            dc = "remote";
                        } else {
                            dc = "local";
                        }
                        for (var i = 0; i < 10; i++) {
                            var v = sketchIOPackRead(names[n], i);
                            document.getElementById("monitor_"+dc+"IOPack_address").innerHTML = names[n];
                            document.getElementById("monitor_"+dc+"IOPack_"+i).innerHTML = v+"<br/>";
                        }
                    }
                }, 1);
            }
        
            function sketchOnAudioAmplitude(v) {
                    monitor_amplitude_0.innerHTML = v;
            }
            
            function x_sketchOnIOPackInput(address, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9) {
                if (address.substr(0, 6) == "remote") {
                    monitor_remoteIOPack_address.innerHTML = address;
                    monitor_remoteIOPack_0.innerHTML = v0;
                    monitor_remoteIOPack_1.innerHTML = v1;
                    monitor_remoteIOPack_2.innerHTML = v2;
                    monitor_remoteIOPack_3.innerHTML = v3;
                    monitor_remoteIOPack_4.innerHTML = v4;
                    monitor_remoteIOPack_5.innerHTML = v5;
                    monitor_remoteIOPack_6.innerHTML = v6;
                    monitor_remoteIOPack_7.innerHTML = v7;
                    monitor_remoteIOPack_8.innerHTML = v8;
                    monitor_remoteIOPack_9.innerHTML = v9;
                } else {
                    monitor_localIOPack_address.innerHTML = address;
                    monitor_localIOPack_0.innerHTML = v0;
                    monitor_localIOPack_1.innerHTML = v1;
                    monitor_localIOPack_2.innerHTML = v2;
                    monitor_localIOPack_3.innerHTML = v3;
                    monitor_localIOPack_4.innerHTML = v4;
                    monitor_localIOPack_5.innerHTML = v5;
                    monitor_localIOPack_6.innerHTML = v6;
                    monitor_localIOPack_7.innerHTML = v7;
                    monitor_localIOPack_8.innerHTML = v8;
                    monitor_localIOPack_9.innerHTML = v9;
                }
            }

            function sketchOnAccelerate(x, y, z) {
                monitor_accel_x.innerHTML = x;
                monitor_accel_y.innerHTML = y;
                monitor_accel_z.innerHTML = z;
            }

            function sketchOnLocation(lat, lon, alt) {
                monitor_location_lat.innerHTML = lat;
                monitor_location_lon.innerHTML = lon;
                monitor_location_alt.innerHTML = alt;
            }
            
            function sketchOnHeading(heading) {
                monitor_heading_0.innerHTML = heading;
            }
            
            function sketchOnProximity(isClose) {
                monitor_proximity_0.innerHTML = isClose ? "near" : "far";
            }
            
            function sketchOnOrientation(orientation) {
                monitor_orientation_0.innerHTML = orientation;
            }
            
            function sketchOnBattery(level) {
                monitor_battery_0.innerHTML = (Math.floor(level * 10000) / 10) + "%";
            }
            
            function sketchOnCameraRead(url) {
                monitor_camera_0_image.src = url;
                monitor_twitter_url.value = url;
            }
            
            var recordedSounds = new Array();
            function sketchOnSoundRecord(url) {
                recordedSounds[recordedSounds.length] = url;
            }
            
            function buildIOPackOutputControls(deviceType) {
                var ctrlBaseName;
                var buttonName;
                for (var i = 0; i < 10; i++) {
                    ctrlBaseName = "output_"+deviceType+"IOPack_"+i;
                    
                    document.write("<input class=\"outputValue\" type=\"text\" name=\""+ctrlBaseName+"\" id=\""+ctrlBaseName+"\" size=\"3\" value=\"0\" />");
                    for (var v = 0; v <= 255; v += 16) {
                        buttonName = ctrlBaseName+"_set"+v;
                        document.write("<a class=\"outputButton\" onclick=\"setIOPackOutputValue('"+deviceType+"',"+i+","+v+")\" onmousedown=\"setIOPackOutputValue('"+deviceType+"',"+i+","+v+")\"></a>");
                    }
                    document.write("<br />");
                }
            }
            
            function setIOPackOutputValue(deviceType, i, v) {
                this["output_"+deviceType+"IOPack_"+i].value = v;
            }
            
            function sendIOPackOutputs(deviceType) {
                sketchSetIOPack(deviceType,
                    this["output_"+deviceType+"IOPack_0"].value,
                    this["output_"+deviceType+"IOPack_1"].value,
                    this["output_"+deviceType+"IOPack_2"].value,
                    this["output_"+deviceType+"IOPack_3"].value,
                    this["output_"+deviceType+"IOPack_4"].value,
                    this["output_"+deviceType+"IOPack_5"].value,
                    this["output_"+deviceType+"IOPack_6"].value,
                    this["output_"+deviceType+"IOPack_7"].value,
                    this["output_"+deviceType+"IOPack_8"].value,
                    this["output_"+deviceType+"IOPack_9"].value
                );
            }
            
            function sketchOnRemoteControlPlay()
            {
                monitor_remotecontrol_0.innerHTML = "PLAY";
            }

            function sketchOnRemoteControlPause()
            {
                monitor_remotecontrol_0.innerHTML = "PAUSE";
            }

            function sketchOnRemoteControlVolume(volume)
            {
                monitor_remotecontrol_1.innerHTML = volume;
            }


            function showCamera() {
                sketchShowCameraPreviewInBackground();
                body.style.backgroundColor = 'transparent';
            }
            
            function hideCamera() {
                sketchHideCameraPreview();
                document.getElementById('content').style.backgroundColor = 'white';
            }
        </script>
		<style type="text/css">
            body {
                background: transparent;
                font-size: 16px;
                font-family:sans serif;
                color: black;
            }
            #content {
                background: white;
            }
			.backgroundImageThatFillsParent {
				display: block
				width: 100%;
				height: 100%;
				position: absolute;
			}
			#ball {
				display: block;
				position: absolute;
				width: 500px;
				height: 500px;
			}
            #monitor_remoteIOPack {
                float: left;
                padding-right: 10px;
            }
            #monitor_location, #monitor_heading {
                float: left;
                padding-right: 10px;
                height: 100px;
            }
            #debug {
                clear: both;
            }
            
            #monitor_localIOPack form, #monitor_remoteIOPack form, .outputValue, .outputButton {
                line-height: 34px;
            }
            .outputValue {
                height: 34px;
            }
            .outputButton {
                background-color: #EEEEEE;
                border-right: 1px solid blue;
                padding-left: 5px;
            }
		</style>
    </head>
    <body>
        <div id="content">
            <div id="version_tag">[Getting RunSketch version...]</div>
            
            <h1>Testing Interface 5</h1>
            
            <div id="monitor_remoteIOPack">
            <b>Remote IOPack:</b><br />
            <i>Inputs:</i>
            <div id="monitor_remoteIOPack_address">...</div>
            <div id="monitor_remoteIOPack_0">---</div>
            <div id="monitor_remoteIOPack_1">---</div>
            <div id="monitor_remoteIOPack_2">---</div>
            <div id="monitor_remoteIOPack_3">---</div>
            <div id="monitor_remoteIOPack_4">---</div>
            <div id="monitor_remoteIOPack_5">---</div>
            <div id="monitor_remoteIOPack_6">---</div>
            <div id="monitor_remoteIOPack_7">---</div>
            <div id="monitor_remoteIOPack_8">---</div>
            <div id="monitor_remoteIOPack_9">---</div>
            <i>Outputs:</i>
            <form>
                <script type="text/javascript">buildIOPackOutputControls("remote");</script>
                <input type="button" onclick="sendIOPackOutputs('remote')" value="*** Send ***" />
            </form>
            
            </div>
            
            <div id="monitor_localIOPack">
            <b>Local IOPack:</b><br />
            <i>Inputs:</i>
            <div id="monitor_localIOPack_address">...</div>
            <div id="monitor_localIOPack_0">---</div>
            <div id="monitor_localIOPack_1">---</div>
            <div id="monitor_localIOPack_2">---</div>
            <div id="monitor_localIOPack_3">---</div>
            <div id="monitor_localIOPack_4">---</div>
            <div id="monitor_localIOPack_5">---</div>
            <div id="monitor_localIOPack_6">---</div>
            <div id="monitor_localIOPack_7">---</div>
            <div id="monitor_localIOPack_8">---</div>
            <div id="monitor_localIOPack_9">---</div>
            <i>Outputs:</i>
            <form>
                <script type="text/javascript">buildIOPackOutputControls("local");</script>
                <input type="button" onclick="sendIOPackOutputs('local')" value="*** Send ***" />
            </form>
            </div>
            
            <div id="monitor_amplitude">
            <b>Audio Amplitude:</b><br />
            <i>Input:</i><br />
            <div id="monitor_amplitude_0">---</div>
            <i>Output:</i><br />
            <form>
                <input type="button" onclick="sketchSetSensorTone(true)" value="Sensor tone ON" /><br />
                <input type="button" onclick="sketchSetSensorTone(false)" value="Sensor tone OFF" /><br />
                <input type="button" onclick="sketchSoundPlay('Media/sample.aif')" value="Play audio file" /><br />
            </form>
            
            <div id="monitor_remotecontrol">
            <b>Hardware Remote Control:</b><br />
            <i>Play/pause button:</i><br />
            <div id="monitor_remotecontrol_0">---</div>
            <i>Volume rocker:</i><br />
            <div id="monitor_remotecontrol_1">---</div>
            </div>
            
            </div>
            
            <div id="monitor_video">
            <b>Video:</b><br />
            <i>Output:</i><br />
            <form>
                <input type="button" onclick="sketchVideoPlay('Media/sample.m4v')" value="Play video file" /><br />
            </form>
            
            
            <div id="monitor_location">
            <b>Location:</b><br />
            <div id="monitor_location_lat">---</div>
            <div id="monitor_location_lon">---</div>
            <div id="monitor_location_alt">---</div>
            </div>
            
            <div id="monitor_heading">
            <b>Heading:</b><br />
            <div id="monitor_heading_0">---</div>
            </div>
            
            <div id="monitor_accel">
            <b>Accelerometer:</b><br />
            <div id="monitor_accel_x">---</div>
            <div id="monitor_accel_y">---</div>
            <div id="monitor_accel_z">---</div>
            </div>
            
            <div id="monitor_proximity">
            <b>Proximity:</b><br />
            <div id="monitor_proximity_0">---</div>
            <form>
                <input type="button" onclick="sketchSetProximitySensor(true)" value="Prox sensor ON" /><br />
                <input type="button" onclick="sketchSetProximitySensor(false)" value="Prox sensor OFF" /><br />
            </form>
            </div>
            
            <div id="monitor_orientation">
            <b>Orientation:</b><br />
            <div id="monitor_orientation_0">---</div>
            </div>
            
            <div id="monitor_battery">
            <b>Battery:</b><br />
            <div id="monitor_battery_0">---</div>
            </div>
        
        <div id="monitor_camera">
            <b>Camera:</b><br />
            <div id="monitor_camera_0"><img id="monitor_camera_0_image" src="Media/circle.png" style="width:80px;height:80px;" /></div>
            <form>
                <input type="button" onclick="sketchCameraRead(true)" value="Capture from camera high-res (slow)" /><br />
                <input type="button" onclick="sketchCameraRead(false)" value="Capture from camera low-res (fast)" /><br />
                <input type="button" onclick="showCamera();" value="Show camera preview in page background" /><br />
                <input type="button" onclick="hideCamera()" value="Hide camera preview" /><br />
            </form>
        </div>
        
        <div id="monitor_twitter">
        <b>Twitter:</b><br />
        <form>
            Username: <input type="text" id="monitor_twitter_username" /><br />
            Password: <input type="password" id="monitor_twitter_password" /><br />
            Message: <input type="text" id="monitor_twitter_message" /><br />
            Image URL: <input type="text" id="monitor_twitter_url" /><br />
            <br />
            <input type="button" onclick="sketchTweet(monitor_twitter_username.value, monitor_twitter_password.value, monitor_twitter_message.value, monitor_twitter_url.value)" value="Send Tweet" /><br />
        </form>
        </div>
        
        <div id="debug">
        <br />
        <b>Messages:</b><br />
        <div id="__debug">---</div>
        </div>
        
      </div>  
    </body>
</html>